/<template>
    <div>
        <ul>
            <li v-for="(item,index) in children" :key="index">
                <img :src="item.img" alt=""/>
                <div>
                    <h1>{{item.name}}</h1>
                    <p v-for="(value,i) in item.songs" :key="i">
                        <span>{{i+1}}</span>
                        <b>{{value.song}}</b>
                        <span>{{value.singer}}</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>

</template>

<script>
export default {
    props:{
        children:Array,
    }
}
</script>

<style>
    li{
        display: flex;
        justify-content: space-between;
        padding: 10px;
        height: 150px;
    }
    li img{
        width: 130px;
        height: 130px;
        margin-right: 10px;
    }
    li div{
        flex: 1;
    }
</style>